<template>
    <div class="docToReadDetail">
        <fl-navBar dark :border="false" :title="title[type]" color="#000000" fixed background-color="#ffffff" status-bar
            left-icon="left" />
        <scroll-view class="docToReadDetail" scroll-y>
            <view class="detail_container">
                <!--
                     type==1收文流转的阅办  
                     type==2 收文流转的查看 
                     type==3收文阅办的查看 
                     type==4收文阅办的阅办 
                     type==5 阅办代理的查看
                     type==6 阅办代理的阅办
                 -->
                <!-- <view v-if="(type == 1 && sendStatus == 2) || type == 3 || type == 5" class="collapse-item">
                    <view class="detail_content">
                        <view class="detail_item">
                            <text class="item_key">来文编号</text>
                            <text class="item_value">{{ doc.sendNo }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">收文分类</text>
                            <text class="item_value">{{ doc.sendCategory == 1 ? '上级来文' : doc.sendCategory == 2 ? '学院通知' :
                                '其他单位来文'
                            }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">公文字号</text>
                            <text class="item_value">{{ doc.bumphNo }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">缓急程度</text>
                            <text class="item_value">{{ doc.urgencyLevel == 1 ? '平急' : doc.urgencyLevel == 2 ? '加急' : '特急'
                            }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">来文日期</text>
                            <text class="item_value">{{ doc.sendDate }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">公文类型</text>
                            <text class="item_value">{{ doc.bumphType }}</text>
                        </view>
                        <view class="detail_item doc_theme">
                            <text class="item_key">来文标题</text>
                            <text class="item_value">{{ doc.bumphTitle }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">来文单位</text>
                            <text class="item_value">{{ doc.sendUnit }}</text>
                        </view>
                        <view class="detail_readMsg">
                            <view class="doc_file" v-if="doc.fileList">
                                <view class="item_file">公文附件</view>
                                <view class="file_name" @tap="handlePrev(dd)" v-for="(dd, ii) in doc.fileList" :key="ii">{{
                                    dd.originalName }}
                                </view>
                            </view>
                        </view>
                        <view class="detail_item doc_theme">
                            <text class="item_key">备注</text>
                            <text class="item_value">{{ doc.remark ? doc.remark : '暂无' }}</text>
                        </view>
                        <view class="detail_item doc_theme" v-show="type == 5">
                            <text class="item_key">意见</text>
                            <text class="item_value">{{ doc.feedback ? doc.feedback : '暂无' }}</text>
                        </view>
                        <view class="detail_item doc_theme" v-show="type == 3">
                            <text class="item_key">阅办意见</text>
                            <text class="item_value">{{ doc.feedback ? doc.feedback : '暂无' }}</text>
                        </view>
                        <view class="detail_item doc_theme">
                            <text class="item_key">阅办记录</text>
                            <view class="readed_item" v-if="doc.subList && doc.subList.length > 0">
                                <view class="readed_item" style="border-bottom: 0;" v-for="(item, index) in doc.subList"
                                    :key="index">
                                    <view class="who_read">{{ item.feedback }}</view>
                                    <view class="who_status"><text>{{ item.issueObjectName }}</text> <text class="read">{{
                                        item.status == 0 ? '' : '已阅办' }}</text> <text class="read_time">{{
        item.completionTime }}</text>
                                    </view>
                                </view>
                            </view>
                            <view v-else class="read_empty">暂无阅办记录</view>
                        </view>
                    </view>
                </view> -->
                <!-- type==1收文流转的阅办 type==4收文阅办的阅办 -->
                <uni-collapse @change="collapseChange" ref="collapse" v-if="type == 1 || type == 4 || type == 6">
                    <uni-collapse-item name="1" :open="type == 2" class="collapse-item" title-border="none" :border="false">
                        <template v-slot:title>
                            <view class="doc_msg">
                                <text class="line"></text>
                                <text class="doc_title">公文信息</text>
                            </view>
                        </template>
                        <view class="detail_content">
                            <view class="detail_item">
                                <text class="item_key">来文编号</text>
                                <text class="item_value">{{ doc.sendNo }}</text>
                            </view>
                            <view class="detail_item">
                                <text class="item_key">收文分类</text>
                                <text class="item_value">{{ doc.sendCategory == 1 ? '上级来文' : doc.sendCategory == 2 ? '学院通知'
                                    :
                                    '其他单位来文'
                                }}</text>
                            </view>
                            <view class="detail_item">
                                <text class="item_key">公文字号</text>
                                <text class="item_value">{{ doc.bumphNo }}</text>
                            </view>
                            <view class="detail_item">
                                <text class="item_key">缓急程度</text>
                                <text class="item_value">{{ doc.urgencyLevel == 1 ? '平急' : doc.urgencyLevel == 2 ? '加急' :
                                    '特急'
                                }}</text>
                            </view>
                            <view class="detail_item">
                                <text class="item_key">来文日期</text>
                                <text class="item_value">{{ doc.sendDate }}</text>
                            </view>
                            <view class="detail_item">
                                <text class="item_key">公文类型</text>
                                <text class="item_value">{{ doc.bumphType }}</text>
                            </view>
                            <view class="detail_item doc_theme">
                                <text class="item_key">来文标题</text>
                                <text class="item_value">{{ doc.bumphTitle }}</text>
                            </view>
                            <view class="detail_item">
                                <text class="item_key">来文单位</text>
                                <text class="item_value">{{ doc.sendUnit }}</text>
                            </view>
                            <view class="detail_item doc_theme">
                                <text class="item_key">阅办记录</text>
                                <view v-if="doc.subList && doc.subList.length == 0" class="read_empty">暂无阅办记录</view>
                                <view class="readed_item" style="border-bottom: 0;" v-else>
                                    <view class="readed_item" v-for="(item, index) in doc.subList" :key="index">
                                        <view class="who_read">{{ item.feedback }}</view>
                                        <view class="who_status"><text>{{ item.issueObjectName }}</text> <text
                                                class="read">{{
                                                    item.status == 0 ? '' : '已阅办' }}</text> <text class="read_time">{{
        item.completionTime }}</text>
                                        </view>
                                    </view>
                                </view>

                            </view>
                        </view>
                    </uni-collapse-item>

                    <uni-collapse-item name="2" :open="open" class="collapse-item" title-border="none" :border="false">
                        <template v-slot:title>
                            <view class="doc_msg">
                                <text class="line"></text>
                                <text class="doc_title">阅办信息</text>
                            </view>
                        </template>
                        <view class="detail_readMsg">
                            <view class="detail_readMsg">
                                <view class="doc_file" v-if="doc.fileList">
                                    <view class="item_file">公文附件</view>
                                    <view v-if="doc.fileList.length > 0" class="file_name" @tap="handlePrev(dd)"
                                        v-for="(dd, ii) in doc.fileList" :key="ii">{{ dd.originalName }}
                                    </view>
                                    <text v-else>暂无附件</text>
                                </view>
                            </view>
                            <view class="doc_file" style="padding-bottom: 10rpx;border-bottom: 2rpx solid #EBEDF0;">
                                <view class="item_file">备注</view>
                                <view v-if="(type == 4 && subStatus == 0) || type == 6" class="remork" style="height:50rpx">
                                    <input :disabled="type == 4 && subStatus == 0" type="text" placeholder="请输入"
                                        placeholder-style="color:#999" style="color: #333;height:100%;font-size: 28rpx;"
                                        v-model="doc.remark">
                                </view>
                                <view v-else class="file_name" style="padding-bottom: 0;color: #999;">
                                    {{ doc.remark ||
                                        '暂无'
                                    }}
                                </view>
                            </view>
                            <view v-if="type != 6" class="doc_file" style="padding-top: 0;">
                                <view style="borderBottom: 2rpx solid #EBEDF0;" @tap="selectObject">
                                    <view class="lzObject">
                                        <view class="obj">选择流转对象</view>
                                        <view class="more">
                                            <text>请选择</text>
                                            <text class="iconfont icon-zuojiantou"></text>
                                        </view>
                                    </view>
                                    <view class="lz_obj" v-if="userIds.length > 0">
                                        <u-tag closable @close="deleteUser(idx)" style="margin: 0rpx; 1rpx 2px 0"
                                            v-for="(ele, idx) in userIds" :key="idx" :text="ele.name + `(${ele.orgName}`"
                                            plain size="mini" />
                                    </view>
                                </view>
                            </view>
                            <view class="doc_file" v-if="type == 1 || type == 6">
                                <view class="advice"> <text v-show="type != 6" style="color: red;">*</text> 意见</view>
                                <view class="file_name" v-if="type == 1 && sendStatus == 1"
                                    style="borderBottom:none;color: #999;">
                                    暂无
                                </view>
                                <view v-else class="file_name" style="borderBottom:none;color: #999;"
                                    @tap="fladvice.handleShow()">
                                    {{ feedback ? feedback : '请选择' }}
                                </view>
                            </view>
                            <!-- <view class="feedfile_box">
                                <view class="upload_file">
                                    <view class="left_feedback">反馈附件</view>
                                    <view class="fileBtn">
                                        <uni-file-picker @select="handleUpload" v-model="doc.fileList" :auto-upload="true"
                                            file-mediatype="all" /> 
                                    </view>
                                </view>
                                <fl-fileList v-if="doc.fileList.length > 0" @delFileItem="delFileItem"
                                    :fileList="doc.fileList" />
                                <view v-else class="empty">暂无附件</view>
                            </view> -->
                            <view class="doc_file" v-if="type == 4">
                                <view class="advice">
                                    <text style="color: red;">*</text>阅办意见
                                </view>
                                <view class="file_name Textarea" v-if="subStatus == 0">
                                    <textarea style="height:100rpx;color: #333333;font-size:28rpx;" v-model="feedback"
                                        placeholder-style="font-size:28rpx;color: #999;" placeholder="请输入" />
                                </view>
                                <view class="file_name Textarea" style="color: #999;" v-else>
                                    {{ feedback || '暂无' }}
                                </view>
                            </view>

                        </view>
                    </uni-collapse-item>
                </uni-collapse>
            </view>
        </scroll-view>
        <view class="submitBtn_box" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px', flex: 'none' }">
            <view class="submitBtn" v-if="type == 1 || type == 4 || type == 6">
                <view class="cancel" @tap="back">上一步</view>
                <!-- 收文流转的操作按钮 -->
                <view class="foujue" v-if="(type == 1 && sendStatus == 0)" @tap="noPass">否决</view>
                <view @tap="handleReading" v-if="(type == 1 && sendStatus == 0)" class="confire">阅办</view>
                <view @tap="handleWander('swlz')" v-if="(type == 1 && sendStatus == 1)" class="confire">流转
                </view>
                <view @tap="handleEnd" class="confire" v-if="type == 1 && sendStatus == 1">办结</view>

                <!-- 收文阅办的操作按钮 -->
                <view class="confire" @tap="handleReading" v-if="type == 4 && subStatus == 0">阅办</view>
                <view @tap="handleWander('swyb')" class="confire" v-if="type == 4 && subStatus == 1">流转</view>
                <view class="confire" @tap="completion" v-if="type == 4 && sendStatus == 1">办结</view>

                <!-- 阅办 代理 -->
                <view class="confire" @tap="handleReading" v-if="type == 6">阅办</view>
            </view>
        </view>
    </div>
    <fl-picker :type="type" @change="feedbackConfirm" ref="fladvice" :pickerList="feedcolumns" />
</template>
  
<script setup lang="ts">
import store from '@/store';
import { getWanderDetail, innerIssuereadFlow, readHandlingFlow, receiveReject, ending, innerIssueproxyHandlingFlow } from '@/api/http'
import { viewFile } from '@/utils/common'
import { ref, nextTick } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import modal from '@/plugins/modal';
const { safeAreaInsets } = uni.getSystemInfoSync()
const props = defineProps(['id', 'type', 'innerIssueSubId', 'sendStatus', 'subStatus'])
const userIds: any = ref([])
const feedback = ref('')
const open = ref(false)
const collapse = ref()
const fladvice = ref()
const feedcolumns = ref(store.getters.who_read)
const doc: any = ref({ fileList: [] })
const bumph_type = ref([])


const title: any = {
    '1': '公文阅办',
    '2': '查看公文',
    '3': '查看公文',
    '4': '阅办公文',
    '5': '查看公文',
    '6': '公文阅办',
}
onLoad(() => {
    bumph_type.value = store.getters.bumph_type
    getList()
    uni.setNavigationBarTitle({ title: title[props.type] })

})
onShow(() => {
    uni.$on('propsUserA', (arr) => {
        userIds.value = arr
        resize()
        uni.$off('propsUserA')
    })
})
const handleEnd = async () => {
    if (doc.value.unRead && doc.value.unRead !== "") return modal.showToast('当前公文还有其他用户未阅办，不能办结！')
    const resu = await modal.confirm('是否办结当前功能?')
    if (!resu) return
    await ending({ innerIssueId: doc.value.innerIssueId })
    proCommon()
}
const deleteUser = (idx: number) => {
    userIds.value.splice(idx, 1)
}
const proCommon = () => {
    modal.msgSuccess('操作成功')
    uni.$emit('read')
    setTimeout(() => {
        uni.navigateBack()
    }, 1000);
}
// 收文流转和收文阅办的流转
const handleWander = async (t) => {
    if (userIds.value.length == 0) return modal.msgError('请选择流转对象')
    const o = {
        innerIssueId: doc.value.innerIssueId,
        userIds: userIds.value.map(e => e.userId)
    }
    if (t === 'swlz') {
        // 收文流转-》流转
        await innerIssuereadFlow(o)
    } else if (t === 'swyb') {
        // 收文阅办-》流转
        await readHandlingFlow(o)
    }
    proCommon()
}
// 收文阅办的办结
const completion = async () => {
    handleEnd()
}


// const handleUpload = async (e) => {
//     let tempFilePaths = e.tempFilePaths
//     let tempFiles = e.tempFiles
//     tempFilePaths.forEach(async (ele, index) => {
//         const res = await upload({ filePath: ele })
//         const re = res.data[0]
//         doc.value.fileList.push({ ...re, file: tempFiles[index].file, url: re.url })
//         modal.msgSuccess('上传成功')
//     })
//     console.log(doc.value, 'doc.value123');
// }
// const delFileItem = (index) => {
//     doc.value.fileList.splice(index, 1)
// }
const resize = () => {
    nextTick(() => {
        setTimeout(() => {
            collapse.value.resize()
        }, 200);
    })
}
const feedbackConfirm = (e: any) => {
    feedback.value = e.dictValue

}
// 收文流转的否决
const noPass = async () => {
    const re = await modal.confirm('确定要否决吗?')
    if (re) {
        await receiveReject(props.id)
        proCommon()
    }

}
// 阅办
const handleReading = async () => {
    // type==6时 意见 不需要必填
    let str = props.type == 1 ? '请选择意见' : '请输入阅办意见'
    if (!feedback.value.trim() && props.type != 6) return modal.msgError(str)
    if (userIds.value.length == 0 && props.type == 1) return modal.msgError('请选择流转对象')
    doc.value.userIds = userIds.value.map(e => e.userId)
    doc.value.feedback = feedback.value
    //   type==1收文流转的阅办 
    //   type==2 收文流转的查看 
    //   type==3收文阅办的查看 
    //   type==4收文阅办的阅办 
    //   type==5 阅办代理的查看
    //   type==6 阅办代理的阅办
    if (props.type == 1) {
        // 收文流转的阅办
        await innerIssuereadFlow(doc.value)
        uni.$emit('read')
    } else if (props.type == 4) {
        // 收文阅办的阅办
        await readHandlingFlow(doc.value)
        uni.$emit('read')
    } else if (props.type == 6) {
        doc.value.innerIssueSubId = props.innerIssueSubId
        await innerIssueproxyHandlingFlow(doc.value)
        uni.$emit('read')
    }
    proCommon()

}
const selectObject = () => {
    uni.navigateTo({ url: '/pages/wanderReceive/index' })
}
const getList = async () => {
    const res = await getWanderDetail(props.id)
    doc.value = res.data
    doc.value.bumphType = filters(res)
    nextTick(() => {
        open.value = true
    })
}
const back = () => {
    uni.navigateBack()
}
const collapseChange = () => {
    resize()
}
const filters = (res: any) => {
    let re = bumph_type.value.find(ele => {
        return ele.dictValue == res.data.bumphType
    })
    return re.dictLabel
}
const handlePrev = async (ele: any) => {
    viewFile(ele)
}
</script>
  
<style scoped lang="scss">
// .feedfile_box {
//     border-bottom: 2rpx solid #EBEDF0;
//     // padding: 40rpx 0;


//     .upload_file {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         min-height: 80rpx;


//         .left_feedback {
//             font-size: 28rpx;
//             color: #333333;
//         }
//     }
// }

.docToReadDetail {
    display: flex;
    flex-direction: column;
    height: 100%;
    // background-color: red;

}


.Textarea {

    padding-left: 10rpx;
    color: #333;
}

.docToReadDetail {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #fff;

    .detail_container {
        height: 100%;
        padding: 0 30rox 0 25rpx;

        .collapse-item {
            height: 100%;
            background-color: #fff;
            // border-bottom: 2rpx solid #EBEDF0;

            .doc_msg {
                display: flex;
                align-items: center;
                height: 100rpx;
                font-size: 32rpx;
                font-weight: 700;
                color: #000;
                padding-left: 25rpx;

                .line {
                    width: 6rpx;
                    height: 30rpx;
                    background-color: #2362A6;
                    margin-right: 12rpx;
                }
            }

            .detail_content {
                width: 710rpx;
                margin: 0 auto;


                .detail_item {
                    display: flex;
                    padding: 0 10rpx;
                    min-height: 90rpx;
                    justify-content: space-between;
                    align-items: center;
                    background-color: #fff;
                    border-bottom: 2rpx solid #EBEDF0;

                    .item_key,
                    .item_value {
                        color: #333333;
                        font-size: 28rpx;
                    }

                    .readed_item {
                        width: 100%;
                        padding: 20rpx 0;
                        border-bottom: 2rpx solid #EBEDF0;

                        .who_read {
                            width: 100%;
                            color: #333;
                            font-size: 28rpx;

                            margin: 10rpx 0 15rpx 0;
                        }

                        .who_status {
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;

                            .read {
                                color: #2362A6;
                                padding: 0 8rpx;
                            }

                            .read_time {
                                padding-top: 5rpx;
                            }
                        }
                    }
                }

                .doc_theme {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 20rpx 10rpx 40rpx 10rpx;


                    .item_key {
                        margin-bottom: 10rpx;
                    }

                    .item_value {
                        margin-bottom: 10rpx;
                        line-height: 40rpx;
                    }
                }
            }

            .detail_readMsg {
                width: 710rpx;
                margin: 0 auto;

                .doc_file {
                    padding: 25rpx 0rpx 0;

                    .advice {
                        font-size: 28rpx;
                        color: #333;
                    }

                    .item_file {
                        color: #333;
                        font-size: 28rpx;
                        margin: 0 0 10rpx 0;
                    }

                    .file_name {
                        display: flex;
                        align-items: center;
                        color: #0D80D7;
                        font-size: 28rpx;
                        line-height: 40rpx;
                        border-bottom: 2rpx solid #EBEDF0;
                        // padding-bottom: 25rpx;
                        min-height: 110rpx;

                        &:last-child {
                            border-bottom: none;
                        }

                    }

                    .lz_obj {
                        padding-bottom: 6rpx;
                    }

                    .lzObject {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 28rpx;
                        color: #000;
                        min-height: 90rpx;

                        .more {
                            display: flex;
                            align-items: center;
                            color: #959595;

                            .iconfont {
                                transform: rotate(180deg);
                                color: #959595;
                                font-size: 30rpx;
                                margin-left: 10rpx;
                            }

                        }
                    }
                }
            }

        }
    }
}


.back {
    width: 690rpx;
    height: 90rpx;
    border: 2rpx solid #DCDCDC;
    border-radius: 45rpx;
    color: #000;
    font-size: 28rpx;
    text-align: center;
    line-height: 90rpx;
}

.submitBtn_box {
    margin: 0 auto;

    .submitBtn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 750rpx;
        background-color: #fff;



        .cancel,
        .foujue,
        .confire {
            width: 210rpx;
            height: 88rpx;
            border: 2rpx solid #DCDCDC;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            border-radius: 44rpx;
            font-size: 28rpx;
            background-color: #fff;
        }

        .foujue {
            background-color: #f5222d;
            color: #fff;
            border: none;
        }

        .confire {
            background-color: #2362A6;
            color: #fff;
            border: none;
        }
    }
}
</style>
  